<!--
  功能：这是角色页面
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月20日 14:34:19
-->
<template>
  <div>
    <div class="search">
      <a-space>
        <a-input v-model:value="search.modul" placeholder="模块检索" />
        <a-input v-model:value="search.message" placeholder="描述检索" />
        <a-input v-model:value="search.ip" placeholder="IP检索" />
        <a-button type="primary" @click="serch">
          <template #icon>
            <search-outlined />
          </template>
          检索
        </a-button>
        <a-button type="primary" danger @click="del">
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </a-space>
    </div>

    <a-table bordered rowKey="id" :columns="columns" :data-source="tableData" :pagination="pagination" :row-selection="{ selectedRowKeys: form.selectedRowKeys, onChange: onSelectChange}" :scroll="{ y: 600 }">
      <template #bodyCell="{ column,text, record }">
        <template v-if="column.key === 'ip'">
          <div>{{record.ipAddress}}</div>
          <a-tag color="processing">{{text}}</a-tag>
        </template>
        <template v-else-if="column.key === 'modul'">
          <template v-if="$isNewDataByTime(record.createTime)">
            <alert-filled :style="{ color: '#eb2f96' }" /> <span :style="{ color: '#eb2f96' }">{{text}} - {{record.message}}</span>
          </template>
          <template v-else>
            {{text}} - {{record.message}}
          </template>
        </template>
        <template v-else-if="column.key === 'type'">
          <div>{{text}}</div>
          <a-tag color="#55acee">
            <div>{{record.methodType}}</div>
          </a-tag>
        </template>
        <template v-else-if="column.key === 'uri'">
          <div>{{text}}</div>
          <a-tag color="orange" @click="showModel(record.params)">
            <div class="optlog-div">{{record.params}}</div>
          </a-tag>
        </template>
        <template v-else-if="column.key === 'status'">
          <div>
            <a-tag color="green" v-if="text == 'SUCCESS'">
              <template #icon>
                <smile-outlined />
              </template>
              成功
            </a-tag>
            <a-tag color="red" v-else-if="text == 'THROW'">
              <template #icon>
                <frown-outlined />
              </template>
              失败
            </a-tag>
          </div>
          <a-tag @click="showModel(record.resultMessage)">
            <div class="optlog-div">{{record.resultMessage}} </div>
          </a-tag>
        </template>
        <template v-else-if="column.key === 'message'">

        </template>
        <template v-else-if="column.key === 'time'">
          {{text}} 毫秒
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" @click="detailRow(record)">
              <template #icon>
                <eye-outlined />
              </template>
              详情
            </a-button>
            <a-button type="primary" danger @click="delRow(record)">
              <template #icon>
                <delete-outlined />
              </template>
              删除
            </a-button>
          </a-space>
        </template>
        <template v-else>
          <span>{{text}}</span>
        </template>
      </template>
    </a-table>

    <a-modal :open="form.visible" title="查看日志信息" @change="form.visible = false" :footer="null" width="850px" destroyOnClose>
      <a-descriptions :title="form.row.modul" style="height: 500px;overflow: auto">
        <a-descriptions-item label="类型">{{form.row.type}}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag color="green" v-if="form.row.status == 'SUCCESS'">
            <template #icon>
              <smile-outlined style="font-size: 20px" />
            </template>
            成功
          </a-tag>
          <a-tag color="red" v-else-if="form.row.status == 'THROW'">
            <template #icon>
              <frown-outlined style="font-size: 20px" />
            </template>
            失败
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="描述">{{form.row.message}}</a-descriptions-item>
        <a-descriptions-item label="运行时间">{{form.row.time}} 毫秒</a-descriptions-item>
        <a-descriptions-item label="创建时间" :span="2">{{form.row.createTime}}</a-descriptions-item>
        <a-descriptions-item label="请求IP">
          <a-tag color="processing">{{form.row.ip}}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="请求IP地址">
          <a-tag color="processing">{{form.row.ipAddress}}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="请求方式">
          <a-tag color="#55acee">{{form.row.methodType}}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="请求地址" :span="3">
          <a-tag color="processing">{{form.row.uri}}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="调用类名称" :span="2">{{form.row.className}}</a-descriptions-item>
        <a-descriptions-item label="调用函数名称">{{form.row.methodName}}</a-descriptions-item>
        <a-descriptions-item label="调用参数" :span="3">{{form.row.params}}</a-descriptions-item>
        <a-descriptions-item label="返回信息" :span="3">{{form.row.resultMessage}}</a-descriptions-item>
      </a-descriptions>
    </a-modal>

    <a-modal :open="model.visible" title="信息" @change="model.visible = false" width="500px" destroyOnClose>
      <div style="max-height: 500px;overflow: auto">
        <pre>{{model.str}}</pre>
      </div>
      <template #footer>
        <a-button key="back" @click="model.visible = false">关闭</a-button>
        <a-button key="submit" type="primary" @click="copyStr">拷贝</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {
  FrownOutlined,
  SmileOutlined,
  AlertFilled,
  DeleteOutlined,
  SearchOutlined,
  EyeOutlined
} from "@ant-design/icons-vue";
import { pageList, remove } from "@/api/sysOperLogApi.ts";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import useClipboard from "vue-clipboard3";
import {} from "vue-router";
import {} from "vuex";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "sysOperLog",
  props: {},
  emits: [],
  setup(props, context) {
    const { toClipboard } = useClipboard();

    const columns = [
      {
        title: "请求IP",
        dataIndex: "ip",
        key: "ip",
        width: 150
      },
      {
        title: "模块名称",
        dataIndex: "modul",
        key: "modul",
        width: 200
      },
      {
        title: "请求接口",
        dataIndex: "uri",
        key: "uri",
        width: 250
      },
      {
        title: "请求方式",
        dataIndex: "type",
        key: "type",
        width: 100
      },
      {
        title: "请求返回",
        dataIndex: "status",
        key: "status",
        width: 250
      },

      {
        title: "运行时间",
        dataIndex: "time",
        key: "time",
        width: 100
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        width: 210
      },
      {
        title: "操作",
        key: "action",
        align: "center",
        width: 200
      }
    ];
    const pagination = {
      current: 1,
      pageSize: 10,
      showSizeChanger: true,
      total: 0,
      showTotal: (total, range) => {
        return `${range[0]}-${range[1]} 共 ${total} 条数据`;
      },
      onChange: (page, pageSize) => {
        data.pagination.current = page;
        data.pagination.pageSize = pageSize;
        initPageList();
      }
    };

    const search = {
      modul: "",
      message: "",
      ip: ""
    };

    const data = reactive({
      columns,
      pagination,
      search,
      tableData: null,
      form: {
        selectedRowKeys: [],
        selectedRows: [],
        row: null,
        type: "insert",
        visible: false
      },
      model: {
        visible: false,
        str: ""
      }
    }); //里面写所有的响应式数据，像vue2中的data一样

    // 初始化表格列表
    let initPageList = () => {
      let params = {
        current: pagination.current,
        size: pagination.pageSize,
        modul: search.modul,
        message: search.message,
        ip: search.ip
      };
      pageList(params).then(resd => {
        data.tableData = resd.records;
        data.pagination.total = resd.total;
      });
    };
    /* 创建全选 */
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      data.form.selectedRowKeys = selectedRowKeys;
      data.form.selectedRows = selectedRows;
    };

    /* 更新行数据 */
    let detailRow = row => {
      data.form.row = row;
      data.form.visible = true;
      data.form.type = "update";
    };

    /*删除数据 */
    let del = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length == 0) {
        message.warning("删除操作至少选择一行数据");
        return false;
      }
      let params = data.form.selectedRowKeys;
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };
    /*删除行数据 */
    let delRow = row => {
      let params = [row.id];
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };

    /* 展示信息 */
    let showModel = str => {
      try {
         data.model.str = JSON.stringify(JSON.parse(str), null, 4);
      } catch (e) {
         data.model.str = str;
      }
      data.model.visible = true;
    };

    /**拷贝信息 */
    let copyStr = () => {
      toClipboard(data.model.str);
      message.success(`拷贝成功`);
    };
    // 检索
    let serch = () => {
      pagination.current = 1;
      initPageList();
    };

    // 页面初始化
    onMounted(() => {
      initPageList(); // 初始化表格
    });

    return {
      ...toRefs(data),
      onSelectChange,
      detailRow,
      del,
      delRow,
      serch,
      showModel,
      copyStr
    };
  },
  components: {
    EyeOutlined,
    FrownOutlined,
    SmileOutlined,
    AlertFilled,
    DeleteOutlined,
    SearchOutlined
  }
});
</script>

<style scoped>
.crud,
.search {
  margin-bottom: 10px;
}

.optlog-div {
  width: 200px;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>